<script setup>
import { onMounted, ref } from 'vue'
import powerSet from '@/utils/power-set.js'

const skuInfo = ref(null)
defineExpose({
  skuInfo,
})
const { specs, skuList } = defineProps(['specs', 'skuList'])
let specDic = {}
onMounted(() => {
  getSpecDic()
  initDisableStatus()
})

const getSpecDic = () => {
  //有库存的规格
  const effectiveSkus = skuList.filter((sku) => sku.inventory > 0)
  //有效的规格转字典
  effectiveSkus.forEach((sku) => {
    const selectedValArr = sku.specs.map((val) => val.valueName)
    const valueNamePowerSet = powerSet(selectedValArr)
    valueNamePowerSet.forEach((keys) => {
      const key = keys.join('-')
      if (specDic[key]) {
        specDic[key].push(sku.id)
      } else {
        specDic[key] = [sku.id]
      }
    })
  })
}
function initDisableStatus() {
  specs.forEach((spec) => {
    spec.values.forEach((value) => {
      value.selected = false
      const b = specDic[value.name]
      value.disabled = b == undefined
    })
  })
}

const changeSelectedStatus = (spec, value) => {
  //选中状态
  if (value.disabled && !value.selected) return
  if (value.selected) {
    value.selected = false
  } else {
    spec.values.map((item) => (item.selected = false))
    value.selected = true
  }
  //禁用状态
  updateDisabledStatus(specs, specDic)
  //选出来的sku信息
  const selectedValues = getSelectedValues(specs)
  if (!selectedValues.includes('')) {
    const key = selectedValues.join('-')
    const skuId = specDic[key]
    if (skuId) {
      skuInfo.value = skuList.find((sku) => sku.id === skuId[0])
    }
  }
}

const getSelectedValues = (specs) => {
  const selectedValues = []
  specs.forEach((spec, index) => {
    const selectedValue = spec.values.find((item) => item.selected)
    selectedValues[index] = selectedValue ? selectedValue.name : ''
  })
  return selectedValues
}
const updateDisabledStatus = (specs, pathMap) => {
  specs.forEach((spec, index) => {
    const selectedValues = getSelectedValues(specs)
    spec.values.forEach((value) => {
      selectedValues[index] = value.name
      const key = selectedValues.filter((item) => item).join('-')
      const pathMapElement = pathMap[key]
      value.disabled = !pathMapElement
    })
  })
}
</script>
<template>
  <div class="choose-attrs" v-if="specs.length">
    <div class="dl" v-for="spec in specs" :key="spec.id">
      <div class="dt">{{ spec.name }}</div>
      <div class="dd">
        <div
          class="spec-list"
          @click="changeSelectedStatus(spec, value)"
          :class="{ selected: value.selected, disabled: value.disabled && !value.selected }"
          v-for="value in spec.values"
          :key="value.name"
        >
          <img v-if="value.picture" :src="value.picture" :alt="value.desc" />
          <span v-else>{{ value.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@mixin sku-state-mixin {
  .spec-list {
    cursor: pointer;
    border: 1px solid #e4e4e4;
    &.selected {
      border: 1px solid $sucColor;
    }
    &.disabled {
      opacity: 0.6;
      border-style: dashed;
      cursor: not-allowed;
    }
  }
}

.choose-attrs {
  padding-left: 10px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  .dl {
    width: 100%;
    display: flex;
    gap: 0 20px;
    align-items: center;
    @include sku-state-mixin;
    .dt {
      min-width: 30px;
    }

    .dd {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 10px;
      align-items: center;
      .spec-list {
        @include sku-state-mixin;
        img {
          height: 50px;
          width: 50px;
        }
        span {
          padding: 0 20px;
          height: 30px;
          text-align: center;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
